<template>
  <div class="page-bg">
    <el-divider></el-divider>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">所属项目</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          {{task.projectName}}
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">开始时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          {{task.startTime}}
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">结束时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          {{task.endTime}}
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">课题负责人</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          {{task.leaderName}}
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="row">
      <span class="v-center">
          <svg class="icon taskIcon" aria-hidden="true">
            <use xlink:href="#iconrenwu"></use>
          </svg>
          课题内容
        </span>
    </div>
    <el-divider></el-divider>
    <div class="weui-cell">{{task.content}}</div>
    <el-divider></el-divider>
    <div class="row">
      <span class="v-center">
          <svg class="icon taskIcon" aria-hidden="true">
            <use xlink:href="#iconrenwu1"></use>
          </svg>
          考核指标
        </span>
    </div>
    <el-divider></el-divider>
    <div class="weui-cell">{{task.target}}</div>
    <el-divider></el-divider>
    <el-divider></el-divider>
    <div class="row">
        <svg class="icon addTaskIcon" aria-hidden="true" @click="handleAddMission" v-if="level === PR">
          <use xlink:href="#iconicon_add"></use>
        </svg>
      <span class="v-center">
        <svg class="icon manageIcon" aria-hidden="true">
          <use xlink:href="#iconZ"></use>
        </svg>
        任务安排
      </span>
    </div>
    <el-divider></el-divider>
    <div v-for="item of missionList" :key="item.id" >
      <div class="row" @click="goMissionDetail(item.name,item.id)">
          <span class="taskName">
            <svg class="icon projectIcon" aria-hidden="true">
              <use xlink:href="#icondian3"></use>
            </svg>
            {{item.name}}
          </span>
        <span class="delIcon" >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconicon_signal"></use>
            </svg>
            {{item.ownerName}}
          </span>
      </div>
      <el-divider></el-divider>
    </div>
    <el-dialog title="新建任务" :visible.sync="addMission" width="90%">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">任务名称</label></div>
        <div class="weui-cell__bd ">
          <input class="weui-input" pattern="[0-9]*" placeholder="请输入任务名称" type="name" v-model="mission.name">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">开始时间</label>
        </div>
        <div class="weui-cell__bd">
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="date" value="" v-model="mission.startTime">
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">结束时间</label>
        </div>
        <div class="weui-cell__bd">
          <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="date" value="" v-model="mission.endTime">
          </div>
        </div>
      </div>
      <div class="weui_cell weui_cell_select">
        <div class="weui_cell_bd weui_cell_primary">
          <select class="weui_select" v-model="mission.ownerID">
            <option value=-1>请选择任务负责人</option>
            <option v-for="data in studentList"
                    :key="data.id"
                    :value="data.id"
                    :label="data.name"></option>
          </select>
        </div>
      </div>
      <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
          <label class="weui-label">任务主要内容</label>
        </div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入任务主要内容"
          v-model="mission.content"
          clearable>
        </el-input>
      </div>
      <div class="weui-cell weui-cells_form">
        <div class="weui-cell__hd">
          <label class="weui-label">任务考核指标</label>
        </div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入任务考核指标"
          v-model="mission.target"
          clearable>
        </el-input>
      </div>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addMission = false">取 消</el-button>
        <el-button type="primary" @click="submit()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'taskDetail',
  data () {
    return {
      level: parseInt(localStorage.getItem('level')),
      mission: {
        name: '',
        moduleID: parseInt(sessionStorage.getItem('taskID')),
        startTime: '',
        endTime: '',
        ownerID: '',
        content: '',
        target: ''
      },
      task: '',
      missionList: [{
        name: '',
        moduleID: parseInt(sessionStorage.getItem('taskID')),
        startTime: '',
        endTime: '',
        ownerID: '',
        content: '',
        target: ''
      }],
      studentList: [],
      addMission: false
    }
  },
  methods: {
    goProjectDetail (projectID, projectName) {
      sessionStorage.setItem('pid', projectID)
      sessionStorage.setItem('pname', projectName)
      this.$router.push('/projectDetail')
    },
    handleAddMission () {
      this.mission.name = ''
      this.mission.startTime = ''
      this.mission.endTime = ''
      this.mission.content = ''
      this.mission.target = ''
      this.mission.ownerID = -1
      this.addMission = true
    },
    getTask () {
      axios.get(this.url + '/module/id/' + sessionStorage.getItem('taskID'))
        .then(this.getTaskSucc)
    },
    getTaskSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.task = res
      }
    },
    getMissionList () {
      axios.get(this.url + '/mission/module/' + sessionStorage.getItem('taskID'))
        .then(this.getMissionListSucc)
    },
    getMissionListSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.missionList = res
      } else alert(res.data)
    },
    getStudentList () {
      // axios.get('/static/testData/module.json')
      axios.get(this.url + '/user/level/' + this.student)
        .then(this.getStudentListSucc)
    },
    getStudentListSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.studentList = res
      } else alert(res.data)
    },
    submit () {
      if (this.mission.name.length > 10) {
        this.$notify.warning({
          title: '任务名称不能超过十个字！'
        })
        return
      }
      this.$axios({
        method: 'post',
        url: this.url + '/mission/',
        data: this.mission
      }).then((res) => {
        if (res.status === 200) {
          res = res.data
          alert('提交成功！')
          this.missionList.push({
            name: this.mission.name,
            ownerName: res.ownerName
          })
        } else alert(res.data)
      }).catch((err) => {
        alert(err)
      })
      this.addMission = false
    },
    goMissionDetail (missionName, missionID) {
      sessionStorage.setItem('missionName', missionName)
      sessionStorage.setItem('missionID', missionID)
      this.$router.push('/missionDetail')
    }
  },
  mounted () {
    this.mission.ownerID = -1
    this.getTask()
    this.getMissionList()
    this.getStudentList()
  }
}
</script>

<style lang="stylus" scoped>
  .taskName
    margin-left .2rem
  .row
    margin-top .6rem
    margin-bottom .6rem
  .taskIcon
    margin-right .5rem
    color #16b0ff
  .manageIcon
    margin-right .5rem
    color #16b0ff
    font-size 28px
  .delIcon
    float right
    margin-right .5rem
  .projectIcon
    margin-right .2rem
  .addTaskIcon
    float: right
    font-size 19.9px
    margin-right .9rem
    margin-top .18rem
    color black
  .right
    float: right
  .iconMargin
    margin-right .3rem
  .textColor
    color #0D0D0D
  .iconColor
    color #88d4ff
  .projectRow
    margin-top .6rem
    margin-left .5rem
    margin-bottom .6rem
  .fuzerenIcon
    margin-right .3rem
</style>
